<template>
  <!-- 地图 -->
  <div style="float: left; width: 100%">
    <!-- <el-input placeholder="请输入地址" v-model="input3" class="input-with-select">
              <el-button slot="append" icon="el-icon-search" @click="inputfz">搜索</el-button>
          </el-input> -->
    <!-- 
      scroll-wheel-zoom是是否可以缩放
      @ready是图加载完后触发事件
      center是位置定位
      zoom是缩放大小限制
      inertial-dragging是允许惯性拖拽
     -->
    <baidu-map
      class="bm-view"
      :zoom="15"
      :center="center"
      inertial-dragging
      @ready="mapReady"
      :scroll-wheel-zoom="true"
    >
      <bm-city-list anchor="BMAP_ANCHOR_TOP_LEFT"></bm-city-list>
      定位控件 anchor="BMAP_ANCHOR_BOTTOM_RIGHT"代表放在右下角
      <bm-geolocation
        anchor="BMAP_ANCHOR_BOTTOM_RIGHT"
        :showAddressBar="true"
        :autoLocation="true"
      ></bm-geolocation>

      <bm-transit
        start="百度大厦"
        end="北京邮电大学西门"
        :auto-viewport="true"
        location="北京"
      ></bm-transit>

      <!-- 地区检索  keyword：关键字搜索   @searchcomplete：检索完成后的回调函数   auto-viewport：检索结束后是否自动调整地图事业  -->
      <!-- <bm-local-search
        :keyword="keyword"
        @searchcomplete="search"
        :auto-viewport="true"
        class="search"
      ></bm-local-search> -->
      <!-- 地图类型切换 -->
      <!-- <bm-map-type
          :map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']"
          anchor="BMAP_ANCHOR_TOP_LEFT"
        ></bm-map-type> -->
      <!-- 缩放控件   anchor代表控件停靠位置   anchor="BMAP_ANCHOR_TOP_RIGHT"代表放在右上角-->
      <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
      <!-- 路书 -->
      <!-- <bm-driving :start="start" :end="end" :panel="false" @stop="reset" :autoViewport="false"></bm-driving> -->
      <!-- <bml-lushu
          :path="lushuPath"
          :icon="icon"
          :speed="speed"
          :content="powerSips"
          :rotation="true"
        >
        </bml-lushu> -->

      <!-- <bm-view class="map" center="北京"> </bm-view> -->

      <!-- 轨迹 -->
      <!-- <new-polyline
          :path="polylinePath"
          :editing="false"
          :icons="icons"
          stroke-color="#8ba0fb"
          :stroke-opacity="1"
          :stroke-weight="8"
          @lineupdate="updatePolylinePath"
        ></new-polyline> -->
      <!-- 起点终点 -->
      <bm-marker
        :position="startPoint"
        :dragging="true"
        @click="infoWindowOpen"
      >
        <bm-label
          content="起点"
          :labelStyle="{ color: 'black', fontSize: '16px' }"
          :offset="{ width: -35, height: 30 }"
        />
      </bm-marker>
      <bm-marker :position="endPoint" :dragging="true" @click="infoWindowOpen">
        <bm-label
          content="终点"
          :labelStyle="{ color: 'black', fontSize: '16px' }"
          :offset="{ width: -35, height: 30 }"
        />
      </bm-marker>
    </baidu-map>
  </div>
</template>

<script>
import {
  BaiduMap,
  BmControl,
  BmView,
  BmAutoComplete,
  BmLocalSearch,
  BmMarker,
  BmGeolocation,
  BmlLushu,
} from "vue-baidu-map";
import { jgTransportDetails } from "@/api/regionalWaste";
export default {
  components: {
    BaiduMap,
    BmControl,
    BmView,
    BmAutoComplete,
    BmLocalSearch,
    BmMarker,
    BmGeolocation,
    BmlLushu,
  },
  data() {
    return {
      //定位位置信息
      center: {
        lng: 116.404,
        lat: 39.915,
      },
      Gjid: "",
      //检索关键字
      keyword: "",
      //输入框input值
      input3: "",
      polylinePath: [
        { lng: 116.404, lat: 39.915 },
        { lng: 116.405, lat: 39.92 },
        { lng: 116.423493, lat: 39.907445 },
      ],
      lushuPath: [],
      startPoint: { lng: 116.404, lat: 39.915 },
      endPoint: { lng: 116.423493, lat: 39.907445 },
      icons: [],
      icon: {
        url: "https://s1.ax1x.com/2023/06/20/pC80IAJ.png",
        size: {
          width: 52,
          height: 52,
        },
        powerSips: "医废运输", //轨迹名称
        color: "", //轨迹颜色
        start: "", //起点
        end: "", //终点
        speed: 20, //轨迹速度
        powerShow: true, //轨迹显示隐
        enableRotation: true,
        BMaps: undefined,
      },
    };
  },
  methods: {
    search() {},
    updatePolylinePath() {},
    infoWindowOpen() {},
    getInfo() {
      jgTransportDetails(this.Gjid).then((res) => {
        if (res.code === 200) {
          this.form = res.data;
          let routeList = [];
          routeList = res.data.routes.map((i) => {
            return {
              lng: i.lng,
              lat: i.lat,
            };
          });
          this.polylinePath = routeList;
          this.guiji();
        }
      });
    },
    //输入框
    inputfz() {
      this.keyword = this.input3;
    },
    //地图加载后的回调
    mapReady({ BMap, map }) {
      this.getInfo();
      this.lushuPath = [];
      //保存this指向，因为在百度的回调中this不指向vue
      const _this = this;
      // 路书车辆旋转
      this.polylinePath.forEach((item) => {
        this.lushuPath.push(new BMap.Point(item.lng, item.lat));
      });

      // 路线箭头颜色
      var sy = new BMap.Symbol(BMap_Symbol_SHAPE_FORWARD_OPEN_ARROW, {
        scale: 1, // 图标缩放大小
        strokeColor: "#fff", // 设置矢量图标的线填充颜色
        strokeWeight: "2", // 设置线宽
      });
      var icons = new BMap.IconSequence(sy, "10", "30");
      _this.icons.push(icons);
      // 获取自动定位方法
      // var geolocation = new BMap.Geolocation();
      // // 获取自动定位获取的坐标信息
      // geolocation.getCurrentPosition(
      //     function (r) {
      //         //可以conso.log看一下这个r，他里面包含了检索到的位置信息。下面就把两个维度信息赋值给center来定位
      //         _this.center = {
      //             lng: r.point.lng,
      //             lat: r.point.lat,
      //         };
      //     },
      //     //启用高精度
      //     { enableHighAccuracy: true }
      // );
    },
    reset() {
      this.play = false;
    },
    //轨迹
    guiji() {
      // this.center = this.lineList[0];
      this.start = this.polylinePath[0];
      this.end = this.polylinePath[this.polylinePath.length - 1];
      this.play = true;
    },
  },
  created() {
    if (this.Gjid) {
      this.getInfo();
    }
  },
};
</script>

<style lang="less" scoped>
/* 给个宽高 */
.bm-view {
  height: 500px;
  margin-top: 20px;
  width: 100%;
}

.input-with-select {
  width: 400px;
  margin-bottom: 5px;
}

.search {
  height: 300px;
  overflow: auto;
}

// 移除左下角百度地图版权
/deep/ div.BMap_cpyCtrl.BMap_noprint.anchorBL {
  display: none;
}
// 移除左下角百度地图logo
/deep/ div.anchorBL {
  display: none;
}
// 悬浮地图时不展示小手
/deep/ .BMap_mask {
  cursor: default;
}
</style>
